import React, { useRef, useEffect, useState } from 'react';
import './dh.scss';

const App = () => {
    const [value, setValue] = useState(1); // 初始值为1



    function calc(newValue) {
        // 更新 CSS 变量 --dh 的值
        document.documentElement.style.setProperty('--dh', `${-newValue}s`);
    }
    calc(value)
    const handleChange = (e) => {
        const newValue = e.target.value; // 获取滑块的新值

        setValue(newValue); // 更新状态
        calc(newValue)
    };

    return (
        <div className='dhBox'>
            <div className='circle'></div>
            <input
                type="range"
                min="0"
                max="2"
                step="0.01"
                value={value}
                className="slider"
                onChange={handleChange} // 处理滑块变化
            />
        </div>
    );
}

export default App;
